<template>
  <view class="member-item" @click="emitClick">
    <view class="top">
      <view class="member-item-avatar">
        <TImage :src="item?.avatar" width="200rpx" height="240rpx" error-img-type="person" />
      </view>
      <view class="member-item-info">
        <view class="member-item-info-top">
          <view class="top-left">
            <view class="member-item-info-name text-overflow-1">{{ item?.name }}</view>
            <view v-if="item?.socialPosition" class="member-item-info-title">
              {{ item?.socialPosition }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="showBottom" class="handel-view">
      <view class="member-item-tag">{{ getLevelText?.dictLabel }}</view>
      <view v-if="showHandelBtn" class="btns">
        <view @click="del">
          <view class="ali-icon">&#xe621;</view>
          <text>删除</text>
        </view>
        <view @click="edit">
          <view class="ali-icon">&#xe611;</view>
          <text>修改</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { delResponsiblePerson } from '@/api/mine';
  import type { IMemberItem } from '@/api/mine/types';
  import TImage from '@/components/TImage/index.vue';
  import { propTypes } from '@/utils/propTypes';
  import { computed, type PropType, ref } from 'vue';
  import dictionary from '@/utils/dictionary';
  import { navigateTo } from '@/router';
  import { MemberRoleEnum } from '@/enums/memberRoleEnum';
  import { Toast } from '@/utils';
  import { ToastTitleEnum } from '@/enums/publicModuleEnum';
  import { useUserStoreWithOut } from '@/store/modules/user';

  const { cocInfo } = useUserStoreWithOut();

  const props = defineProps({
    item: Object as PropType<IMemberItem>,
    showBottom: propTypes.bool.def(false),
    showBtns: propTypes.bool.def(true),
    isUnitDataEdit: propTypes.bool.def(false),
  });

  const memberLevel = ref(dictionary.getLocal('memberLevel'));
  const getLevelText = computed(() => {
    const type = props.item?.memberRoleType;
    return memberLevel.value.find((v) => {
      return Number(v.dictValue) === type;
    });
  });

  const emit = defineEmits(['click', 'update']);
  const emitClick = () => emit('click');

  const showHandelBtn = computed(
    () =>
      props.showBtns &&
      props.item?.memberRoleType !== MemberRoleEnum.PRINCIPAL &&
      cocInfo.memberRoleType !== MemberRoleEnum.MEMBER,
  );

  const edit = () => {
    if (!props.isUnitDataEdit) {
      /** 成员列表编辑 */
      navigateTo({
        name: 'membershipEdit',
        options: {
          item: props.item,
          callback: () => emit('update'),
        },
      });
    } else {
      /** 单位资料人员信息编辑 */
      // props.item && navigateTo({ name: 'unitsPersonInfoEdit', options: { id: props.item?.id } });
    }
  };
  const del = () => {
    const id = props.item?.id as number;
    uni.showModal({
      title: '提示',
      content: `是否立即删除该成员`,
      success: async ({ confirm }) => {
        if (confirm) {
          await delResponsiblePerson(id);
          Toast(ToastTitleEnum.DELETEDSUCCESS);
          emit('update');
        }
      },
    });
  };
</script>

<style lang="scss" scoped>
  .member-item {
    background-color: #fff;
    .top {
      padding: 30rpx;
      padding-right: 0;
      border-top: 1px solid #f5f5f5;
      display: flex;
      align-items: center;
    }
    .handel-view {
      height: 77rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;
      border-top: 2rpx solid #f5f5f5;
      > .btns {
        display: flex;
        align-items: center;
        > view {
          display: flex;
          align-items: center;
          margin-left: 35rpx;
          font-size: 23rpx;
          color: #aaabab;
          .ali-icon {
            font-size: 32rpx;
          }
        }
      }
    }
    &-avatar {
      width: 200rpx;
      flex-shrink: 0;
      margin-right: 42rpx;
    }
    &-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      &-top {
        padding-bottom: 17rpx;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .top-left {
          display: flex;
          align-items: center;
          margin-right: 30rpx;
        }
      }
      &-name {
        font-size: 31rpx;
        color: #333;
      }
      &-title {
        border-radius: 15rpx;
        background-color: #40beff;
        height: 31rpx;
        line-height: 31rpx;
        font-size: 23rpx;
        padding: 0 20rpx;
        min-width: 50rpx;
        margin-left: 10rpx;
        text-align: center;
        color: #fff;
        margin-left: 20rpx;
      }
    }

    &-tag {
      width: 138rpx;
      height: 37rpx;
      background: #f5f5f5;
      border-radius: 19rpx;
      text-align: center;
      line-height: 37rpx;
      font-size: 23rpx;
      color: #333;
    }
  }
</style>
